<template>
    <div class="engineer" v-if="pageData">
        <div class="list">
            <div class="item clear">
                <div class="wheel">
                    <div class="wheel-out"></div>
                    <div class="wheel-in"></div>
                    <div class="time">
                        <h4 class="defaultFontNum">{{pageData.most.date1}}</h4>
                        <h3 class="defaultFontNum">{{pageData.most.date2}}</h3>
                    </div>
                </div>
                <div class="wheel-content">
                    <p>这一天是医工最忙碌的一天</p>
                    <p>全天累积接修 <b style="font-family: DIGIT;font-size: 3.5rem">{{pageData.most.frequency}}</b> 次</p>
                </div>
            </div>
            <div class="item clear">
                <div class="wheel">
                    <div class="wheel-out"></div>
                    <div class="wheel-in"></div>
                    <div class="time">
                        <h4 class="defaultFontNum">{{pageData.earliest.date1}}</h4>
                        <h3 class="defaultFontNum">{{pageData.earliest.date2}}</h3>
                    </div>
                </div>
                <div class="wheel-content">
                    <p>这一天最早的接修是 <b>{{pageData.earliest.fix}}</b> 医工</p>
                    <p>接修设备 <b>{{pageData.earliest.equipment}}</b></p>
                </div>
            </div>
            <div class="item clear">
                <div class="wheel">
                    <div class="wheel-out"></div>
                    <div class="wheel-in"></div>
                    <div class="time">
                        <h4 class="defaultFontNum">{{pageData.last.date1}}</h4>
                        <h3 class="defaultFontNum">{{pageData.last.date2}}</h3>
                    </div>
                </div>
                <div class="wheel-content">
                    <p>这一天最晚的接修是 <b>{{pageData.last.fix}}</b> 医工</p>
                    <p>接修设备 <b>{{pageData.last.equipment}}</b></p>
                </div>
            </div>
            <div class="item clear">
                <div class="wheel">
                    <div class="wheel-out"></div>
                    <div class="wheel-in"></div>
                    <div class="time">
                        <h4 class="defaultFontNum">{{pageData.longest.date1}}</h4>
                        <h3 class="defaultFontNum">{{pageData.longest.date2}}</h3>
                    </div>
                </div>
                <div class="wheel-content">
                    <p>{{pageData.longest.fix}} 创下一天内医工奔波最久时长</p>
                    <p>当天工作时长超过 <b style="font-family: DIGIT;font-size: 3.5rem">{{pageData.longest.range}}</b> 小时</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script type="text/javascript">
    export default {
        props: {
            pageData: {
                type: [Array, Object]
            }
        },
        data () {
            return {}
        },
        mounted () {
        },
        components: {},
        watch: {
            pageData: function (n, o) {
            }
        }
    }
</script>
<style lang='scss' rel="stylesheet/scss">
    .engineer{
        background-image: url("../../assets/images/monitor-bg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
        .list{
            width: 52rem;
            position: absolute;
            top: 50%;
            margin-top: -39.5rem;
            left: 50%;
            margin-left: -26rem;
            .item{
                width: 100%;
                height: 14rem;
                position: relative;
                right: 0;
                margin: 0 0 8rem 0 ;
                .wheel{
                    width: 14rem;
                    height: 100%;
                    position: absolute;
                    left:0;
                    text-align: center;
                    .wheel-in ,.wheel-out{
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        z-index: 20;
                    }
                    .wheel-in{
                        background-image: url("../../assets/images/wheel-in.png");
                        animation: counterclockwise 2s linear infinite ;
                    }
                    .wheel-out{
                        background-image: url("../../assets/images/wheel-out.png");
                        animation: clockwise 2s linear infinite ;
                    }
                    .time{
                        position: absolute;
                        z-index: 30;
                        text-align: center;
                        width: 100%;
                        opacity: 0;
                        >h4{
                            font-size: 1.5rem;
                            margin: 4.5rem 0 0.5rem 0;
                        }
                        >h3{
                            margin: 0;
                            font-size: 2.3rem;
                        }
                    }
                }
                .wheel-content{
                    float: right;
                    height: 100%;
                    width: 44rem;
                    background: url("../../assets/images/wheel-box.png");
                    background-size: 100% 100%;
                    color: #2eeec9;
                    >p{
                        &:nth-child(1){
                            font-size: 1.5rem;
                            margin: 3.8rem 0 0 10rem;
                        }
                        &:nth-child(2){
                            font-size: 2.2rem;
                            margin: 0.7rem 0 0 10rem;
                            letter-spacing: 3px;
                            >b{
                                font-size: 2.7rem;
                            }
                        }
                    }
                }
            }
        }
    }
    .showCurrentPageModule{
        .list{
            .time{
                animation: defaultOpacityAni 0.2s linear 0.2s;
                animation-fill-mode: forwards;
            }
        }
    }
</style>